<template>
  <div class="notice-page page">
    <nav-bar title="党建活动" theme="red" search message></nav-bar>
    <van-swipe :autoplay="3000" class="notice-swipe" v-if="bannerList.length !== 0">
      <van-swipe-item
        v-for="(item, index) in bannerList"
        :key="index"
        @click="$router.push('/partyBuilding/activity/detail?code=' + item.code)"
      >
        <img :src="$config.ImageURl + item.imageUrl" />
      </van-swipe-item>
    </van-swipe>
    <div class="notice-image" v-if="flag">
      <img src="~@/assets/images/notice/banner.png" />
    </div>
    <div class="notice-division"></div>
    <div class="notice-secant"></div>
    <van-tabs v-model="searchForm.type" line-height="0" swipe-threshold="3" @change="tabChange">
      <van-tab v-for="(item, key) in typeList" :key="key" :name="item.code">
        <template #title>
          <van-tag
            v-if="searchForm.type === item.code"
            type="danger"
            round
            plain
            size="large"
            style="background-color: rgba(201, 36, 32, 0.1)"
          >
            {{ item.description }}
          </van-tag>
          <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
            {{ item.description }}
          </van-tag>
        </template>
      </van-tab>
    </van-tabs>
    <van-sticky class="page-scroll" :offset-top="44">
      <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
        <template v-if="listData.length">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了~"
            @load="getList"
          >
            <div
              class="notice-list"
              v-for="(item, index) in listData"
              :key="index"
              @click="$router.push('/partyBuilding/activity/detail?code=' + item.code)"
            >
              <img :src="$config.ImageURl + item.imageUrl" v-if="item.imageUrl" />
              <img src="~@/assets/images/notice/bannerLeft.png" v-if="!item.imageUrl" />
              <div class="notice-list-textRight">
                <p class="notice-list-textRight-title">{{ item.name }}</p>
                <div>
                  <span class="lefts act-lefts">
                    <img
                      class="act-person-icon"
                      src="~@/assets/images/partyBuilding/service_activity_people.png"
                      alt=""
                    />
                    {{ item.personCount }}
                  </span>
                  <span class="rights">{{ item.publishTime }}</span>
                </div>
              </div>
            </div>
          </van-list>
        </template>
        <template v-else>
          <van-empty
            :image="require('@/assets/images/basic/pic_no_content.png')"
            description="暂无内容~"
            style="height: 300px"
          />
        </template>
      </van-pull-refresh>
    </van-sticky>
  </div>
</template>
<script>
import Public from '@/api/public'
import partyBuilding from '@/api/partyBuilding'
import List from '@/mixins/list'
import { mapState } from 'vuex'
export default {
  mixins: [List],
  data() {
    return {
      typeList: [],
      api: partyBuilding.Activity,
      searchForm: {
        type: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      bannerList: [],
      flag: false
    }
  },
  created() {
    this.init()
    this.getBanner()
    this.getList()
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  methods: {
    getBanner() {
      partyBuilding.Activity.bannerlist().then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.bannerList = res.data.data
        } else {
          this.flag = true
        }
      })
    },
    // 点击类型字典项
    tabChange(code) {
      this.listData = []
      this.searchForm.type = code
      this.getList()
    },
    // 活动类型字典项
    init() {
      Public.Init.init({
        type: 'partyActivityType'
      }).then(res => {
        this.typeList = res.data.data.partyActivityType
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/notice/list.less';
@import '~@/assets/style/partyBuilding/index.less';
</style>
